<template>

	<view class="track-layout" >

		<view class="topview">
			<wu-calendar color="#6ac695" :item-height=50 type="week" start-week="mon" ref="calendar"
				@change="calendarConfirm" :insert="true" :fold="false"></wu-calendar>
		</view>
		<view class="map-body" v-if="imei">
			<web-view :fullscreen="false" :webview-styles="{width:'100%', height:'100%'}"
				:style="{width:'100%', height:'100%'}" ref="webview" src='../../static/html/trackrecord.html'
				@message="handleMessage"></web-view>
		</view>
		<nodata class="no_data" :isAdd="true" v-else>
			<template v-slot:custom>
				{{$t('map.noDevice')}}
			</template>
		</nodata>
	</view>
</template>

<script>
	import {
		apiDeviceDayTrajectory
	} from '../../api/device_api';
	import { i18nTool } from '../../utils/i18en';
	import {
		getStatusBarHeight,
		getNavBarHeight,
		getTitleBarHeight,
		platForm
	} from '../../utils/system';
	import {
		getCurrentDate,
		getYesterdayDate
	} from '../../utils/time';
	import {
		getImei,
		trackPlayStyle
	} from '../../utils/user_tools';
	
	var wv;
	export default {
		
		created() {

		},
		data() {
			return {
				day: null,
				imei: null,
				param: null,
				pathList: [],
				width: 0,
				loadFinish: false,
			}
		},
		onShow() {
			this.imei = getImei();
			this.day = getCurrentDate();
			if (this.loadFinish) {
				this.$refs.calendar.updateCalendar();
			}
		},
		onLoad() {
			this.imei = getImei();
			
		},
		onHide() {
			var message = {
				type: 1000,
			}
			this.postMessage(message);
		},
		onReady() {
			
		},
		methods: {
			
			async getDeviceDayTrajectory() {
				this.param = {
					imei: this.imei,
					day: this.day
				}
				let res = await apiDeviceDayTrajectory(this.param)
				this.pathList = res.content;
				if (this.pathList.length == 0) {
					uni.showToast({
						title: i18nTool('track.nodata'),
						icon: "none",
					})
					return
				}

				var message = {
					msg: this.pathList,
					type: trackPlayStyle(),
				}
				this.postMessage(message);
			},
			//给webView发消息 `{type:1}`
			postMessage(info) {
				// #ifdef APP-PLUS
				var currentWebview = this.$scope.$getAppWebview()
				let wv = currentWebview.children()[0];
				wv.evalJS(`getVueMessage(${ JSON.stringify(info)})`);
				// #endif
			},
			handleMessage(evt) {
				console.log('接收到H5的消息：' + JSON.stringify(evt.detail));
				let data = evt.detail.data[0];
				if (data.msg == 'getTrackRecord') {
					uni.setNavigationBarTitle({
						title: i18nTool('track.navTitle')
					})
					this.setWebviewHeight();
					this.loadFinish = true;
					this.getDeviceDayTrajectory();
				}
			},
			getTopViewStyle() {
				return {
					height: getTitleBarHeight() + 'px'
				};
			},
			getStatusStyle() {
				return {
					height: getStatusBarHeight() + 'px'
				};
			},
			setWebviewHeight() {
				// #ifdef APP-PLUS
				let height = 0;
				uni.getSystemInfo({
					success: sysinfo => {
						height = sysinfo.safeArea.height
					},
				});
				const currentWebview = this.$scope.$getAppWebview();
				const wv = currentWebview.children()[0];
				wv.setStyle({
					top: getNavBarHeight() + 140,
					height: height - 140,
				});
				// #endif
			},
			calendarConfirm(e) {
				var message = {
					type: 1000,
				}
				this.postMessage(message);

				this.day = e.fulldate;
				if (this.imei) {
					this.getDeviceDayTrajectory();
				}
			},
		}
	}
</script>


<style lang="scss" scoped>
	.nodata {
		height: 100%;
		width: 100%;
	}

	.track-layout {
		.topview {
			width: 100%;
			position: fixed;
			box-sizing: border-box;
			box-shadow: 0px 0px 10rpx rgba(0, 0, 0, 0.1);
			height: 270rpx;
			background-color: white;
			top: 0;
			z-index: 100000001;
		}


		.map-body web-view {
			overflow: hidden;
		}

		.no-record {
			background-color: #fff;
			position: fixed;
			bottom: 0;
			top: 270rpx;
			left: 0;
			right: 0;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			z-index: 100000;

			.no-record-img {
				width: 100rpx;
				height: 100rpx;
			}

			.no-record-text {
				font-size: 26rpx;
				color: #666;
			}


		}

	}
</style>